<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8">
    <title>Title</title>
</head>
<body>

    <div style="height: 50px;width: 400px;position:relative;">  <!--使用position,让图标位于输入框的右侧-->
        <!--padding-right设置内边距，使得输入内容不会被图片覆盖-->
        用户名：<input type="text" style="height: 45px;width: 320px;padding-right:40px; ">
        <!--设置图片大小，设置图片位置，设置span标签为inline-block-->
        <span style="position: absolute;right: 40px;top: 23px;background-image: url(../image/i_name.png);height: 46px; width: 38px;display: inline-block;"></span>
    </div>
    <br>
    <div style="height: 50px;width: 400px;position: relative;">
        密码：<input type="password" style="height: 45px;width: 320px;padding-right: 40px">

        <span style="position: absolute;right: 40px;top: 22px;background-image: url(../image/i_pwd.png);height: 49px;width: 39px;display: inline-block"></span>
    </div>
    <br>
    验证码：
    <div>
        <div style="height: 50px;width: 400px;position:relative;">
            <input type="text" style="height: 45px;width: 200px">
            <span style="position:absolute;right: 15px; background-image: url(../image/i_auth.png);height: 49px;width: 179px;background-position:134px 62px"></span>
        </div>
    </div>
</body>
</html>